<template>
    <div class="MallManage">
      <div>
        <el-input v-model="input" placeholder="商品编码" style="width:200px"></el-input>
        <el-input v-model="input1" placeholder="条形编码" style="width:200px"></el-input>
        <!-- 所属门店 -->
        <el-select v-model="value" placeholder="所属门店">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 商品分类 -->
        <el-select v-model="value1" placeholder="所属门店" style="width:200px">
          <el-option1 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option1>
        </el-select>
        <!-- 智能搜索 -->
        <el-input v-model="input2" placeholder="智能搜索" style="width:200px"></el-input>
        <!-- 商品名称 -->
        <el-input v-model="input3" placeholder="商品名称" style="width:200px"></el-input>
        <!-- 别名 -->
        <el-input v-model="input4" placeholder="别名" style="width:200px"></el-input>
        <!-- 商品特色 -->
        <el-input v-model="input5" placeholder="商品特色" style="width:200px"></el-input>
        <!-- 标签关键词 -->
        <el-input v-model="input6" placeholder="标签/关键词" style="width:200px"></el-input>
        <!-- 上架状态 -->
        <el-select v-model="value2" placeholder="所属门店">
          <el-option2 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option2>
        </el-select>
        <!-- 是否推荐 -->
        <el-select v-model="value3" placeholder="所属门店">
          <el-option3 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option3>
        </el-select>
        <!-- 审核状态 -->
        <el-select v-model="value4" placeholder="所属门店">
          <el-option4 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option4>
        </el-select>
        <!-- 拼团状态 -->
        <el-select v-model="value5" placeholder="所属门店">
          <el-option5 v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option5>
        </el-select>
        <el-button type="primary">搜索</el-button>
        <div>
          <el-button type="danger">批量导入</el-button>
          <el-button type="success">单个发布</el-button>
        </div>
  
      </div>
      <el-tabs v-model="editableTabsValue" type="card" editable @tab-click="handleTabsEdit" @edit="delTab">
        <el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name">
  
  
          <!-- 内容表格 -->
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="370px"
            @selection-change="cont">
            <el-table-column type="selection" width="50" text-align="center">
            </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="{row}">
                <img :src="row.pic" alt="" width="70px ">
              </template>
            </el-table-column>
  
            <el-table-column prop="barCode" label="编号/条码">
              <template slot-scope="{row}">
                {{ row.id }}<br />
                {{ row.barCode }}
  
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="门店/分类">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="statusStr" label="库存状态">
              <template slot-scope="{row}">
                <el-tag type="success">已审核</el-tag>
                <br />
                <el-tag type="danger">{{ row.statusStr }}</el-tag><br />
                <el-tag type="success">默认展示</el-tag>
  
  
              </template>
            </el-table-column>
            <el-table-column prop="minPrice" label="价格" width="120">
              <template slot-scope="{row}">
  
                商品原价:{{ row.originalPrice }}<br />
                最低价格:{{ row.minPrice }}<br />
                砍价底价 : {{ row.kanjiaPrice }}<br />
                团购价格 : {{ row.pingtuanPrice }}
  
              </template>
            </el-table-column>
            <el-table-column prop="title" label="数据统计">
              <template>
                浏览量 : 0<br />
                收藏量 : 0<br />
                订单数 : 0<br />
                订单数 : 0<br />
                entity.shop.Sale<br />
                svolume : 0
              </template>
            </el-table-column>
            <el-table-column prop="title" label="满意度">
              <template>
                赞 : 0<br />
                踩 : 0
              </template>
            </el-table-column>
  
  
            <el-table-column prop="address" label="操作" width="300" style="text-align:center">
  
            </el-table-column>
          </el-table>
  
        </el-tab-pane>
      </el-tabs>
  
    </div>
  </template>
  
  <script>
  // 引入商品管理js接口
  import { mallmanagement, mallchildrList } from "@/api/index"
  
  export default {
    name: 'MallManage',
    data() {
      return {
        input: '',
        input1: '',
        input2: "",
        input3: "",
        input4: "",
        input5: "",
        input6: "",
  
        editableTabsValue: '1',
        // 选择框
        options: [],
        value: '',
        // 商品分类
        options1: [],
        value1: '',
        //上架分类
        options2: [],
        value2: '',
        //是否推荐
        options3: [],
        value3: '',
        //审核状态
        options4: [],
        value4: '',
        //审核状态
        options5: [],
        value5: '',
  
  
        editableTabs: [{
          title: '全部',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: '销售中',
          name: '2',
          content: 'Tab 2 content'
        },
        {
          title: '已售罄',
          name: '3',
          content: 'Tab 3 content'
        },
        {
          title: '仓库中',
          name: '4',
          content: 'Tab 4 content'
        }],
        tabIndex: 2,
        tableData: [],
        list: {
          page: 1,
          pageSize: 50,
          vetStatus: "",
          categoryValue: "",
          goodsType: 1
        }
      }
    },
    methods: {
      cont(val) {
        console.log(val)
        this.multipleSelection = val;
      },
      delTab(targetName, action) {
      
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
  
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      },
      handleTabsEdit(targetName) {
        console.log(targetName.name)
        let id = this.editableTabs.filter(r => r.name == targetName.name)[0].id
        this.getchildsList({ propertyId: id })
      },
  
  
  
      // tab栏有父子内容嵌套,需要请求两个接口,先获取父接口拿到数据,再创建子接口,
      // 把父接口获取的id以调用子接口函数的方式穿过去请求子内容
      async getTabList() {
        let { data: res } = await mallmanagement()
        this.tableData = res.result
        console.log(res)
        // this.editableTabsValue = this.editableTabs[0].name
        // this.getchildsList({ propertyId: this.editableTabs[0].id })
      },
      async getchildsList(id) {
        let { data: res } = await mallchildrList(id)
        this.tableData = res
        console.log(res)
      },
  
  
    },
    mounted() {
      this.getTabList(this.list)
  
    },
  
  }
  </script>
  <style lang="scss" scoped>
  .GoodsManage {
    .el-select {
      &::v-keep .el-input .el-input__inner {
        width: 200px;
      }
    }
  
  }
  </style>